<template>
	<view class="page">
		<view class="my_list">
			<navigator class="my_Order_box" url="" hover-class="none">
				<view class="my_Order my_item my_item_avatar">
					<text>头像</text>
					<!-- <image class="avatar" src="../../../static/img/default-grey.png"></image> -->
					<avatar class="avatar" ref="avatar" :avatarSrc="avatar" @upload="myUpload" avatarStyle="width: 133upx; height: 133upx; border-radius: 100%;">
					</avatar>
					<view class="avatarMask" @click="upLoadAvatar"></view>
				</view>
				<uni-icons class="my_Order_icon" type="forward" size="20" color="#B3B3B3"></uni-icons>
			</navigator>
			<navigator class="my_address_box" url="" hover-class="none" @click="open">
				<view class="my_address my_item">
					<text>用户名</text>
				</view>
				<uni-icons class="my_address_icon" type="forward" size="20" color="#B3B3B3"></uni-icons>
			</navigator>
			<navigator url="" class="my_Authentication_box" hover-class="none" @click="openEwm">
				<view class="my_Authentication my_item">
					<text>二维码</text>
					<image class="ewm" src="../../../static/img/ewm.png"></image>
				</view>
				<uni-icons class="my_Authentication_icon" type="forward" size="20" color="#B3B3B3"></uni-icons>
			</navigator>
			<view class="line25"></view>
			<navigator url="" class="my_demand_box" hover-class="none" @click="changepassword">
				<view class="my_demand my_item">
					<text>修改密码</text>
				</view>
				<uni-icons class="my_demand_icon" type="forward" size="20" color="#B3B3B3"></uni-icons>
			</navigator>
			<navigator url="n" class="my_Authentication_box" hover-class="none" @click="changephone">
				<view class="my_Authentication my_item">
					<text>修改手机号</text>
				</view>
				<uni-icons class="my_Authentication_icon" type="forward" size="20" color="#B3B3B3"></uni-icons>
			</navigator>
			<view class="line25"></view>
			<navigator url="/pages/my/my_proposal/my_proposal" class="my_evaluate_box" hover-class="nonez">
				<view class="my_evaluate my_item">
					<text>建议与反馈</text>
				</view>
				<uni-icons class="my_evaluate_icon" type="forward" size="20" color="#B3B3B3"></uni-icons>
			</navigator>
			<view class="line25"></view>
		</view>
		<view class="login_out">
			退出登录
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<uni-card note="true">
					<input class="uni-input" focus placeholder="输入用户名" placeholder-style="color:#B3B3B3" />
					<template v-slot:footer>
						<view class="footer-box">
							<view class="surBtn">确定</view>
						</view>
					</template>
				</uni-card>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	import uniCard from '@/components/uni-ui/uni-card/uni-card.vue'
	export default {
		components: {
			avatar,
			uniPopup,
			uniCard
		},
		data() {
			return {
				avatar: '/static/img/default-grey.png'
			};
		},
		methods: {
			myUpload(res) {
				uni.getFileSystemManager().readFile({ // 转base64
					filePath: res.path, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => { //成功的回调
						// 上传的图片路径
						let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
						// 数组和对象不能直接赋值 建议使用$set方法
						this.avatar = base64; //更新头像方式一
					}
				})
			},
			upLoadAvatar() {
				this.$refs.avatar.fChooseImg(0, {
					selWidth: "300upx",
					selHeight: "300upx",
					quality: "0.1",
					canRotate: "false"
				});
			},
			open() {
				this.$refs.popup.open()
			},
			openEwm () {
				uni.navigateTo({
					url:"/pages/my/my_ewm/index"
				})
			},
			changepassword () {
				uni.navigateTo({
					url:"/pages/my/change_password/index"
				})
			},
			changephone () {
				uni.navigateTo({
					url:"/pages/my/change_phone/index"
				})
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss">
	.my_list {
		box-sizing: border-box;
		margin-top: 12rpx;
		navigator {
			padding-left: 33rpx !important;
			padding-right: 33rpx !important;
			border-bottom: 1px solid rgba($color: #eee, $alpha: .5);
		}

		.my_customerService_box {
			padding-left: 33rpx !important;
			padding-right: 33rpx !important;
			border-bottom: 1px solid rgba($color: #eee, $alpha: .5);
		}

		.my_item {
			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 17rpx;
				vertical-align: middle;
			}

			text {
				color: #565656;
				font-size: 32rpx;
				vertical-align: middle;
			}
		}

		.my_address_box {
			display: flex;
			padding: 25rpx 0 25rpx 0;
			justify-content: space-between;

			.my_address {
				height: 50rpx;
			}

			.my_address_icon {}
		}

		.my_Order_box {
			position: relative;
			display: flex;
			padding: 25rpx 0 25rpx 0;
			justify-content: space-between;

			.my_Order {
				height: 50rpx;
			}

			.my_item_avatar {
				height: 133rpx;
				line-height: 133rpx;

				.avatar {
					position: absolute;
					right: 85rpx;
					top: 25rpx;
					width: 133rpx;
					height: 133rpx;
				}

				.avatarMask {
					position: absolute;
					right: 0;
					top: 25rpx;
					width: 100%;
					height: 133rpx;
				}
			}

			.my_Order_icon {
				line-height: 133rpx;
			}
		}

		.my_evaluate_box {
			display: flex;
			padding: 25rpx 0 25rpx 0;
			justify-content: space-between;

			.my_evaluate {
				height: 50rpx;

			}

			.my_evaluate_icon {}
		}

		.my_Authentication_box {
			position: relative;
			display: flex;
			padding: 25rpx 0 25rpx 0;
			justify-content: space-between;

			.my_Authentication {
				height: 72rpx;
				line-height: 72rpx;
			}

			.ewm {
				position: absolute;
				right: 85rpx;
				top: 25rpx;
				width: 72rpx;
				height: 72rpx;
				margin-right: 0;
			}

			.my_Authentication_icon {
				line-height: 72rpx;
			}
		}

		.my_demand_box {
			display: flex;
			padding: 25rpx 0 25rpx 0;
			justify-content: space-between;

			.my_demand {
				height: 50rpx;

			}

			.my_demand_icon {}
		}

		.my_proposal_box {
			display: flex;
			padding: 25rpx 0 25rpx 0;
			justify-content: space-between;

			.my_proposal {
				height: 50rpx;

			}

			.my_proposal_icon {}
		}

		.my_customerService_box {
			display: flex;
			padding: 25rpx 0 25rpx 0;
			justify-content: space-between;
			position: relative;

			.my_customerService {
				height: 50rpx;
				line-height: 50rpx;
				color: #565656;
				font-size: 32rpx;
			}

			.callPhone {
				position: absolute;
				top: 50%;
				right: 75rpx;
				transform: translateY(-50%);
				height: 50rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				color: #565656;
			}

			.my_customerService_phone {
				// margin-left: 374rpx;
				font-size: 24rpx;

				.phone_top {
					margin-left: 356rpx;
				}

				.phone_button {
					margin-left: 267rpx;
				}
			}

			.my_customerService_icon {
				line-height: 50rpx;
			}
		}
	}

	.line25 {
		width: 100%;
		height: 25rpx;
		background: #F4F4F4;
	}

	.login_out {
		width: 683rpx;
		height: 100rpx;
		margin: 67rpx auto 0;
		line-height: 100rpx;
		background: rgba(54, 138, 255, 1);
		border-radius: 50rpx;
		border: 1px solid rgba(151, 151, 151, 1);
		text-align: center;
		font-size: 36rpx;
		color: #fff;
	}

	.popup-content {
		// width: 572rpx;
		// height: 106rpx;
		// padding: 0 33rpx;
		// line-height: 122rpx;
		// background: rgba(255, 255, 255, 1);
		// color: #B3B3B3;
		// border-radius: 17rpx;
		// .uni-input {
		// 	display: inline-block;
		// }
	}
	.surBtn {
		text-align: center;
	}
</style>
